<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
</head>
<body>
<div id="app">

<!--  //按钮-->
  <a href="ipfs-up.html" >新增</a>


  </el-row>
<!--  //表格-->
  <template >
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              type="index"
              align="center">
      </el-table-column>
        <el-table-column
                prop="name"
                label="文件名称"
                align="center">
        </el-table-column>
      <el-table-column
              prop="hashCode"
              label="哈希值"
              align="center">
      </el-table-column>
      <el-table-column
              label="操作"
              align="center">

        <template slot-scope="scope">
        <el-button type="primary" ><a :href="'http://127.0.0.1:8080/ipfs/'+scope.row.hashCode" target="_blank" >查看</a></el-button>
        <el-button type="danger" @click="deleteByName(scope.row.name)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el:"#app",
    created:function (){
      //异步请求
      this.query();
    },
    methods: {
        deleteByName(name){
            axios({
                method: "post",
                url: "http://localhost/java_ipfs_war_exploded/Delete",
                data:{name}
            }).then(function (resp) {
                alert(resp.data)
            })
        },
        query() {
        var this1 = this;
        axios({
          method: "get",
          url: "http://localhost/java_ipfs_war_exploded/Query"
        }).then(function (resp) {
          this1.tableData = resp.data;
          console.log(resp)
        })
      },

    },
    data() {
      return {
        name:"123",
        hashCode:"123",
        //表格数据
        tableData: [{
          name:"1",
          hashCode: '14565656'
        },{
          name:"1",
          hashCode: "456565"
        }]
      }
    }

  })
</script>
</body>
</html>